<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 本地加载 -->
  <script src="../../js/jquery-3.4.1.min.js"></script>
  <!-- 网络加载 -->
  <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
  <script>
   
    window.onload = function(){
      $("#wrap").addClass("bordercolor");
      // var ele = document.getElementById("wrap");
      // var initClass = ele.getAttribute("class");
      // ele.setAttribute("class",initClass + " bordercolor")
      // alert($("#wrap").attr("class"));

      // document.getElementsByClassName("text")[0]
      //   .innerHTML = "文本内容";
      // // $(".text").eq(0).html("文本内容111111");
      // $(".text").eq(0).append("文本内容111111");
      var str = "";
      for(var i=0;i<10;i++){
        str += '<div class="box"></div>';
      }
      $("body").eq(0).append(str);
      // $(".box:odd").html("文本");
      // $(".box:lt(3)").html("文本");
      $(".box").html("文本");
      // $(selector).addClass(className);
      $(".box").attr("style", "font-size:30px;color:blue;");
      // $(".box").eq(0).on(mousover, function () {
        
      // });
      // $(".box").eq(0).mouseover(function () { 
      //   $(".box").eq(0).addClass("boxover");
      // });
      // $(".box").eq(0).mouseout(function () { 
      //   $(".box").eq(0).removeClass("boxover");
      // });
      // $(".box").eq(0).click(function (e) { 
      //   $(".box").eq(0).toggleClass("boxover");        
      // });
      $(".box").click(function (e) {
        var i=$(".box").index(this); 
        $(".box").eq(i).toggleClass("boxover");        
      });
      $(selector).append(content);
      $(content).appendTo(selector);
      $(selector).after(content);
      $(selector).before(content);
      $(selector).bind(eventType, function (e) {
        
      });
      $(selector).css(propertyName, value);

    }
    // dom document Object model
  </script>
  <style>
    .boxover{
      background-color: red;
      border: 1px solid green;
    }
    .box{
      border: 1px solid red;
      margin-top: 10px;
      width: 100%;
      height: 50px;
    }
    .fontsize{
      color: red;
      font-size: 26px;
    }
    .bordercolor{
      border: 1px solid blue;
    }
    .text{
      border: 3px solid green;
      height: 200px;
      width: 600px;
    }
  </style>
</head>
<body>
  
</body>
</html>